<template>
	<view class="pop-dialog" v-if="showDialog" :style="'top:'+topPosition+';right:'+rightPosition">
		<!-- 三角形  如果要定制的话，从这里找到css triangle进行修改 -->
		<view class="triangle" :style="'margin-right:'+triangleMarginRight+'px;border-bottom: 12px solid '+bgColor+';'"></view>
		<view class="pop-body">
			<view v-for="(item,index) in menuList" v-bind:key="index" class="pop-item">
			<uni-list :border="false">
				<uni-list-item :style="'background-color:' + bgColor"
							   @click="onClickPopMenu"
							   :to="item.toPage"
							   :link="item.toLink"
							   :showArrow=false>
					<template v-slot:header>
						<view class="slot-box">
							<image class="slot-image" :src="item.icon" mode="widthFix"></image>
						</view>
					</template>
					<template v-slot:body>
						<text class="slot-box slot-text" :style="'color:' + textColor">{{item.name}}</text>
					</template>
				</uni-list-item>
			</uni-list>
				<!--				<view class="uni_flex_row_align_left" style="height: 100rpx;width: 100%;">
					<image class="pop-img" :src="item.icon" v-if="item.icon"></image>
					<text class="uni_16px_400_colorfff" style="margin-left: 40rpx;" :style="'color:'+textColor+';'">{{item.name}}</text>
				</view>
				<view :class="item.icon?'pop-line':'pop-line-full'" :style="'background-color:'+lineColor+';'" v-if="index < menuList.length - 1"></view>-->
			</view>
		</view>
	</view>
</template>

<script>
import UniList from "../../../uni-list/components/uni-list/uni-list.vue";
import UniListItem from "../../../uni-list/components/uni-list-item/uni-list-item.vue";

	export default{
		components: {
			UniList,
			UniListItem
		},
		props:{
			textColor:{
				type:String,
				default: '#ffffff'
			},
			bgColor:{
				type:String,
				default: '#4B4B4B'
			},
			// lineColor:{
			// 	type:String,
			// 	default: '#6C6C6C'
			// },
			isShow:{
				type: Boolean,
				default: false
			},
			list:{
				type:Array,
				default: ()=>{
					return []
				}
			},
			top:{
				type:Number,
				default:0
			},
			left:{
				type:Number,
				default:0
			},
			right:{
				type:Number,
				default:0
			},
			triangleMarginRight:{
				type:Number,
				default: 11
			}
		},
		data(){
			return {
				showDialog:false,
				menuList:[],
				topPosition:0,
				rightPosition:0,
				leftPosition:0
			}
		},
		watch:{
			isShow:{
				immediate:true,
				handler:async function (newVal,oldVal){
					this.showDialog = newVal;
				}
			},
			list:{
				immediate:true,
				handler:async function (newVal,oldVal){
					this.menuList = newVal;
				}
			},
			top:{
				immediate:true,
				handler:async function (newVal,oldVal){
					this.topPosition = newVal;
				}
			},
			left:{
				immediate:true,
				handler:async function (newVal,oldVal){
					this.leftPosition = newVal;
				}
			},
			right:{
				immediate:true,
				handler:async function (newVal,oldVal){
					this.rightPosition = newVal;
				}
			},
		},
		methods:{
			onClickPopMenu(){
				this.showDialog = false
			}
		}
	}
</script>

<style>
	
.pop-dialog{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	z-index: 99;
	position: absolute;
}

.triangle {
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
}

.pop-body{
	border-radius: 10px;
	width: 95px;
}

/*
.pop-item{
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
}

.pop-line-full{
	width: 288rpx;
	height: 2rpx;
}
.pop-line{
	width: 166rpx;
	height: 2rpx;
}

.pop-img{
	width: 20px;
	height: 20px;
	margin-left: 40px;
}
*/

.slot-box {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;

	/*border: solid 1px black;*/
}

.slot-image {
	/* #ifndef APP-NVUE */
	display: block;
	/* #endif */
	margin-right: 15px;
	margin: 0 auto;
	width: 12px;
	height: 12px;

	/*border: solid 1px black;*/
}

.slot-text {
	flex: 1;
	font-size: 12px;
	margin-left: 2px;
	text-align: center;

	/*border: solid 1px black;*/
}
</style>
